import React, {useMemo} from 'react';
import styled from 'styled-components';
import {ModalProps} from '../Modal';
import useBasisCash from "../../hooks/useBasisCash";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import {DepoManager} from "../ComponentsManager";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {
    colors,
    FishColors,
    FishInfoCn,
    FishName,
    FishDna,
    getFishCardSrc,
    getFishCardBg,
    FishLp
} from "../../common/common";
import {ContainerModal, FlexView, FlexViewBetween} from "../components";
import useApprove721 from "../../hooks/useApprove721";
import {BigNumber} from "ethers";
import {getDisplayBalance} from "../../utils/formatBalance";
import {FishCard, FishGuize, FishGuizeDesc, FishGuizeTit, MyFishCard, FishConts, DescBtn2} from "./FishModal";
import useStakeCards from "../../hooks/useStakeCards";

const SelectFishCardModal: React.FC<ModalProps> = ({onDismiss, coin,color,fishNumber,onSelect=()=>{}}) => {
    const basisCash = useBasisCash();
    const [balance, setBalance] = React.useState('');
    const pool = basisCash.contracts?.[FishLp[color]+'_NFTRewardPool'];
    const [items, setItems] = React.useState([]);
    console.log(color)
    React.useEffect(() => {
        if (basisCash) {
            basisCash.NYC.displayedBalanceOf(basisCash.myAccount).then(res => {
                setBalance(res);
            });
            basisCash.getOwnerOf().then(res => {
                console.log(res);
                const arr = res.filter((item:any)=>{
                    if(color>=0){
                        return item.color==color && item.number!=fishNumber;
                    }else {
                        return item.number!=fishNumber;
                    }

                })
                setItems(arr);
            });
        }
    }, [basisCash]);
    // 选择鱼卡
    function selectCard(data:any){
        onSelect(data);
        onDismiss();
    }

    return (
        <ContainerModal>
            <MyFishCard>
                <MyFishTitHeadCont>
                    <MyFishTitHead>
                        <div></div>
                        <MyFishTit
                            // onClick={() => changeType(1)}
                        >我的鱼卡</MyFishTit>
                        <img
                            src={ImageCommon.img_close}
                            width={18}
                            height={18}
                            onClick={() => {
                                // changeType(0);
                                // onClose()
                                onDismiss();
                            }}
                        />
                    </MyFishTitHead>
                    <MyFishTitDesc>
                        <DescFlex1>
                            {/*<DescFlex2>*/}
                            {/*    <DescBtn1>*/}
                            {/*        待兑换NYC*/}
                            {/*    </DescBtn1>*/}
                            {/*    <DescText>*/}
                            {/*        /!*{Number(earned).toFixed(4)}*!/*/}
                            {/*    </DescText>*/}
                            {/*</DescFlex2>*/}
                            <DescFlex2>
                                <DescBtn2>
                                    NYC余额
                                </DescBtn2>
                                <DescText>
                                    {Number(balance).toFixed(4)}
                                </DescText>
                            </DescFlex2>
                        </DescFlex1>
                        <DescFlexRight>
                            {/*<FlexViewCenter>*/}
                            {/*    <DescBtn3>*/}
                            {/*        我的鱼卡*/}
                            {/*    </DescBtn3>*/}
                            {/*</FlexViewCenter>*/}
                            <SpanRightc
                                onClick={() => window.open(basisCash.getBuyTokenUrl('USDT/NYC', basisCash?.config?.lavaUrl))}> 前往LAVA进行获取NYC </SpanRightc>
                        </DescFlexRight>
                    </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    {items.map((item:any) => {
                        return (
                            <FishCard
                                item={item}
                            >
                                <FishdiBitn
                                    onClick={()=>{
                                        selectCard(item);
                                    }}
                                >选择鱼卡</FishdiBitn>
                            </FishCard>
                        )
                    })
                    }
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
        </ContainerModal>
    )
}
const FlexViewCenter = styled.div`
   display:flex;
   align-items:center;
   justify-content:center;
`
const AddCardView = styled(FlexViewCenter)`
    flex-direction:column;
    width: 230px;
    box-shadow: 0px 0px 10px 0px ${colors.main};
    border-radius: 20px;
`
const AddWrap = styled(FlexViewCenter)`
    flex-direction:column;
    width: 190px;
    height: 120px;
    border: 1px dashed ${colors.main};
    border-radius: 20px;
`
const AddIcon = styled.img`
    width:50px;
    height:50px;
`
const AddTitle = styled.div`
    font-size: 18px;
    font-weight: bold;
    color: ${colors.main};
    margin-top:10px;
`
const PageShows = styled.div`
    position:  fixed;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
`

// export const MyFishCard = styled.div`
//     width: 100%;
//     max-width: 800px;
//     height: 920px;
//     background: #FFFFFF;
//     border-radius: 20px;
//     @media (max-width: 768px) {
//         width:80%;
//    };
// `

const MyFishTitHeadCont = styled.div`
    width: 100%;
    background: linear-gradient(0deg, #F27405, #FFA82B);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 17px;
`

const MyFishTitDesc = styled.div`
    height: 110px;
    margin: 0 18px;
    background: #D26300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display:flex;
`

const DescFlex1 = styled.div`
display:flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

`

const DescFlexRight = styled.div`
display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-right: 20px;
`

const DescFlex2 = styled.div`
display:flex;
flex-direction: row;
align-items: center;
`

const DescBtn3 = styled.div`
width: 110px;
line-height: 30px;
background: #FFBB7F;
border-radius: 15px;
text-align: center;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
cursor:pointer;
`

const DescText = styled.div`
margin-left: 9px;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
`

const MyFishTitHead = styled.div`
width: 100%;
height: 56px; 
display:flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
`

const MyFishTit = styled.span`
line-height: 56px;
font-size: 20px;
font-family: FZCuYuan-M03S;
font-weight: 400;
color: #FFFFFF;
`

const SpanRightc = styled.span`
line-height: 18px;
font-size: 16px;
font-family: PingFang SC;
text-decoration: underline;
color: #FFFFFF;
margin-top: 15px;
`

const FishCardsb = styled.div`
    width: 230px;
    // height: 390px; 
    position: relative;
    margin-top: 51px;
    display:flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    z-index:0;
    padding-bottom:30px;
`

const FishCSpanTit = styled.span`
margin-top: 10px;
text-align: center;
line-height: 18px;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const FishCSpanXian = styled.div`
width:100%;
border-bottom: 1px dashed #ffffff;
margin-top: 12px; 
`

const FishCSpanYuka = styled.span`
text-align: center;
line-height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-top: 10px;
`

const FishYukuai = styled.div`
width: 190px;
background: rgba(255,255,255,0.42);
margin-top: 11px;
padding: 10px 0;
`

const FishziConts = styled.div`
display: flex;
flex: 1;
`

const FishZizuo = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: right;
flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
`

const FishZiyou = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: left;
flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
`

export const FishdiBitn = styled.div`
    text-align: center;
    width: 160px;
    line-height: 36px;
    background: ${colors.main};
    color:${colors.white};
    border-radius: 18px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    cursor:pointer;
`
export const FishBtnBorder = styled(FishdiBitn)`
    background: ${colors.white};
    color:${colors.main};
    border: 2px solid ${colors.main};
`


const Zhiya = styled.span`
width: 42px;
text-align: center;
background: #F27405;
border-radius: 8px;
line-height: 18px;
font-size: 12px;
margin-left: 2px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
`

const ZhiyaContCard = styled.div`
width: 230px;
height: 260px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #FFE4CC;
border-radius: 20px;
display: flex;
flex-direction: column;
    justify-content: end;
    align-items: center;
`

const ZhiyaPosi = styled.div`
position: relative;
width: 191px;
margin-top: 20px;
`

const Zhiyapip = styled.div`
position: absolute;
width: 131px;
line-height: 32px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 30px;
top: 0;
background: #000000;
color: #FFFFFF;
text-align: center;
`

const ZhiyaBtnzy = styled.div`
width: 160px;
background: #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
`

const ZhiyaTiquBtn = styled.div`
width: 160px;
border: 1px solid #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #F27405;
text-align: center;
margin-top: 10px;
`

const Xiaotan1 = styled.div`
position: fixed;
    z-index: 89;
    top: 50%;
    left: 50%;
    margin: -20% 0 0 -150px;
width: 300px;
z-index: 100;
background: #fff;
border-radius: 10px;
`

const XiaotanSpan = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const XiaotanDivCon = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 30px;
`

const XiaotanDivCon1 = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanDivCon2 = styled.div`
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanTishi = styled.span`
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanTishiTexr = styled.div`
font-size: 18px;
line-height: 30px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 16px;
padding: 0 30px;
`

const XiaotanTishiTexr1 = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanBtns1 = styled.div`
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
`

const XiaotandivFlex = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
`
export default SelectFishCardModal;
